<template>
    <div class="nav">
        <div class="mid-width">
            <ul class="navbar">
                <li v-for="(item, index) in navs" :key="index">
                    <router-link tag="a" :to="{path:item.url, query:{'typeId':item.typeId}}"><i :class="item.ico"></i>&nbsp;&nbsp;&nbsp;{{item.navTit}}</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import vm from '@/event'
    export default {
        name: "navbar",
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                navs:[
                    {
                        navId: 0,
                        navTit: "首页",
                        url: "/index",
                        ico:"el-icon-s-home"
                    },
                    {
                        navId: 1,
                        navTit: "政策法规",
                        url: "/list",
                        typeId: 1,
                        ico:"el-icon-s-cooperation"
                    },
                    {
                        navId: 2,
                        navTit: "通知公告",
                        url: "/list",
                        typeId: 2,
                        ico:"el-icon-s-flag"
                    },
                    {
                        navId: 3,
                        navTit: "土地信息",
                        url: "/lands",
                        typeId: 4,
                        ico:"el-icon-s-check"
                    },
                    {
                        navId: 4,
                        navTit: "文件下载",
                        url: "/list",
                        typeId: 3,
                        ico:"el-icon-download"
                    },
                    {
                        navId: 5,
                        navTit: "联系方式",
                        url: "/contract",
                        typeId: 6,
                        ico:"el-icon-phone"
                    }
                ]
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            sendData() {
                this.$http.get(`${baseConfig.xxkUrl}`)
                    .then(function(res){
                        console.log(res)
                    })
                    .catch(err=>{console.log(err)}
                    )
            }
        },
        mounted(){
            //this.sendData()
        }
    }
</script>

<style lang="less" scoped>
    .nav{
        background: #009688;
        height: 60px;
        .el-menu-item{
            width: 16%;
            font-size: 16px;
            text-align: center;
        }
        .navbar{
            display: flex;
            flex-direction: column-reverse;
            flex-wrap: wrap;
            height: 60px;
            li{
                line-height: 60px;
                text-align: center;

                &:hover{
                    background: rgba(0, 0, 0, .2);
                }
                a{
                    display: block;
                    color: #fff;
                    text-decoration: none;
                }
            }
        }

    }

</style>